<template>
  <div>
    <el-row>
      <header-layout class="header-layout" :head_title="'Physical Modeling'"></header-layout>
    </el-row>
    <el-card
      class="box-card"
    >
    <!-- <div class="department-outer"> -->
      <div class="view-box" v-if="showTree">
        <OrgView
          @on-node-click="handleNodeClick"
          :data="datas"
          :zoom-handled="0.9"
          @on_button_click="handleButtonClick"
          ref="myOrgView"
          v-if="hackReset"
        ></OrgView>
      </div>
      <PhyTable
        v-model="datas"
        :selectedNode="selectedNode"
        v-if="!showTree"
        @go-back="goBack"
        @on_button_click="handleButtonClick"
      ></PhyTable>
    <!-- </div> -->

    </el-card>

    <!-- Dialogs -->
    <!-- 部门添加 -->
    <el-dialog
      :title="title"
      :visible.sync="dialogOrg_add"
      width="30%"
      :before-close="handleClose"
    >
      <el-form
        ref="form"
        :model="addForm"
        label-width="120px"
      >
        <el-form-item :label="label" >
          <el-input v-model="addForm.name"></el-input>
        </el-form-item>
      </el-form>
      <span
        slot="footer"
        class="dialog-footer"
      >
        <el-button @click="dialogOrg_add = false">取 消</el-button>
        <el-button
          type="primary"
          @click="addOrg"
        >确 定</el-button>
      </span>
    </el-dialog>
     <!-- 设备添加 -->
    <el-dialog
          :title="title"
          :visible.sync="dialogDevice_add"
          width="30%"
          :before-close="handleClose"
          @open="getInitData"
        >
          <el-form
            ref="form"
            :model="addForm"
            label-width="120px"
          >
            <el-form-item :label="label" >
              <el-input v-model="addForm.name"></el-input>
            </el-form-item>
            <el-form-item label="设备类型：" >
             <el-select v-model="addForm.deviceType" clearable placeholder="请选择" v-on:change="selectDevice($event)">
              <el-option
                v-for="item in options"
                :key="item.id"
                :label="item.name"
                :value="item.id">
              </el-option>
            </el-select>
            </el-form-item>
             <el-form-item label="选择设备：" >
             <el-select v-model="addForm.deviceId" clearable  placeholder="请选择">
              <el-option
                v-for="item in devices"
                :key="item.id"
                :label="item.name"
                :value="item.id">
              </el-option>
            </el-select>
            </el-form-item>
             <el-form-item label="部门：" >
             <el-select v-model="addForm.orgId" :disabled="disOrg" placeholder="请选择">
              <el-option
                v-for="item in departments"
                :key="item.id"
                :label="item.name"
                :value="item.id">
              </el-option>
            </el-select>
            </el-form-item>
             <el-form-item label="区域：" >
             <el-select v-model="addForm.regionId" :disabled="disReg" placeholder="请选择">
              <el-option
                v-for="item in regions"
                :key="item.id"
                :label="item.name"
                :value="item.id">
              </el-option>
            </el-select>
            </el-form-item>
          </el-form>
          <span
            slot="footer"
            class="dialog-footer"
          >
            <el-button @click="dialogDevice_add = false">取 消</el-button>
            <el-button
              type="primary"
              @click="addDevice"
            >确 定</el-button>
          </span>
        </el-dialog>
    <!-- 删除 -->
    <el-dialog
      title="删除信息"
      :visible.sync="dialog_delete"
      width="30%"
      :before-close="handleClose"
    >
      <span>确定要删除{{selectedNode==null?"":selectedNode.label}}吗？</span>
      <span
        slot="footer"
        class="dialog-footer"
      >
        <el-button @click="dialog_delete = false">取 消</el-button>
        <el-button
          type="primary"
          @click="deleteNode"
        >确 定</el-button>
      </span>
    </el-dialog>
    <!-- 部门编辑 -->
    <el-dialog
      :title="title"
      :visible.sync="dialogOrg_edit"
      width="30%"
      :before-close="handleClose"
    >
      <el-form
        ref="form"
        :model="editForm"
        label-width="120px"
      >
        <el-form-item :label="label" >
          <el-input v-model="editForm.name"></el-input>
        </el-form-item>
      </el-form>
      <span
        slot="footer"
        class="dialog-footer"
      >
        <el-button @click="dialogOrg_edit = false">取 消</el-button>
        <el-button
          type="primary"
          @click="updateOrg"
        >确 定</el-button>
      </span>
    </el-dialog>
    <!-- 设备编辑 -->
      <el-dialog
        :title="title"
        :visible.sync="dialogDevice_edit"
        width="30%"
        :before-close="handleClose"
      >
        <el-form
          ref="form"
          :model="editForm"
          label-width="120px"
        >
          <el-form-item :label="label">
            <el-input v-model="editForm.name"></el-input>
          </el-form-item>
          <el-form-item label="设备类型：" >
             <el-select v-model="editForm.deviceType" placeholder="请选择" v-on:change="selectDevice($event)">
              <el-option
                v-for="item in options"
                :key="item.id"
                :label="item.name"
                :value="item.id">
              </el-option>
            </el-select>
            </el-form-item>
             <el-form-item label="选择设备：" >
             <el-select v-model="editForm.deviceId" placeholder="请选择">
               <el-option
                v-for="item in devices"
                :key="item.id"
                :label="item.name"
                :value="item.id">
              </el-option>
            </el-select>
            </el-form-item>
             <el-form-item label="部门：" >
             <el-select v-model="editForm.orgId" :disabled="disOrg" placeholder="请选择">
                <el-option
                v-for="item in departments"
                :key="item.id"
                :label="item.name "
                :value="item.id">
              </el-option>
            </el-select>
            </el-form-item>
             <el-form-item label="区域：" >
             <el-select v-model="editForm.regionId" :disabled="disReg" placeholder="请选择">
              <el-option
                v-for="item in regions"
                :key="item.id"
                :label="item.name"
                :value="item.id">
              </el-option>
            </el-select>
            </el-form-item>
        </el-form>
        <span
          slot="footer"
          class="dialog-footer"
        >
          <el-button @click="dialogDevice_edit = false">取 消</el-button>
          <el-button
            type="primary"
            @click="updateDevice"
          >确 定</el-button>
        </span>
      </el-dialog>
  </div>
</template>

<script>
// import OrgView from './org-tree/components/org-view.vue'
// const menuList = ["add", "delete", "edit", "detail"];
import { requestGetOrg,requestPostOrg,requestGetDict,requestPostDict,requestPostMachine  } from '@/api/api'
import { org_list_url,org_add_url,org_update_url,org_del_url,machine_del_url,dict_parent_code_url,dict_parent_pid_url,org_levle2_parent_id,org_levle3_parent_id,machine_add_url,machine_edit_url,machine_update_url } from '@/config/config'
export default {
  name: "PhysicalModeling",
  components: {
    OrgView: () => import("./org-tree/components/org-view.vue"),
    PhyTable: () => import("./PhyTable.vue"),
    HeaderLayout: () => import('@/pages/contents/system_configuration/SysComponents/HeaderLayout')
  },
  data () {
    return {
      changeLog: "updated by Bai Xiaoran,2019/03/15,11:00AM",
      showTree: true,
      datas: {},
      dialogDevice_add: false,
      dialogOrg_add:false,
      dialog_delete: false,
      dialogOrg_edit: false,
      dialogDevice_edit:false,
      selectedNode: {},
      addForm: {},
      editForm: {
        name:'',
        deviceId:null,
        deviceType:null,
        regionId:null
        },
      detailForm: {},
      maxNodeId: 0,
      hackReset: true,
      del_url:"",
      label:"",
      title:"",
      options:[],
      devices:[],
      regions:[],
      departments:[],
      disOrg:false,
      disReg:false
    };
  },
  computed: {

  },
  methods: {
    goBack () {
      this.showTree = true;
    },
    doExport () {
      console.log(this.datas);
      this.datas.label = 'test';
    },
    setDepartmentData (data) {
      data.isRoot = true;
      return data;
    },
    handleNodeClick (e, data, expand) {
      this.selectedNode = data;
      this.showTree = false;
    },
    getDepartmentData () { 
      //构建组织机构数据
       requestPostOrg(org_list_url, {pid:0}).then(data => {
            this.datas = data;
          }).catch(error => {
            this.$message({
              message: error,
              type: 'error'
            })
          });
    
    },
    handleButtonClick ({ key, data }) {
      this.selectedNode = data;
      if (key == "add") {
        this.getLabel(data.level,key);
      } else if (key == "delete") {
        this.dialog_delete = true;
      } else if (key == "edit") {
        this.getLabel(data.level,key);
        this.setData(data);
      } 
    },
    handleClose (done) {
      this.$confirm("确认关闭？")
        .then(_ => {
          done();
        })
        .catch(_ => { });
    },
    addOrg () {
      this.addForm.parentid = this.selectedNode.id;
      this.addForm.level = this.selectedNode.level;
      requestPostOrg(org_add_url, this.addForm).then(data => {
            this.$message({ message: data.msg ,type:"success"});
            this.dialogOrg_add = false;
            this.getDepartmentData();
          }).catch(error => {
            this.$message({
              message: error,
              type: 'error'
            })
          });
    },
    updateOrg(){
      requestPostOrg(org_update_url, this.editForm).then(data => {
            this.$message({ message: data.msg,type:"success" });
            this.dialogOrg_edit = false;
            this.getDepartmentData();
          }).catch(error => {
            this.$message({
              message: error,
              type: 'error'
            })
          });
    },
    deleteNode () {
       this.editForm.ids = this.selectedNode.id;
       this.del_url = org_del_url;
       if(this.selectedNode.level>3){this.del_url = machine_del_url;}
        requestPostOrg(this.del_url, this.editForm).then(data => {
            this.$message({ message: data.msg,type:"success" });
            this.dialog_delete = false;
            this.getDepartmentData();
          }).catch(error => {
            this.$message({
              message: error,
              type: 'error'
            })
        });
    },
    getLabel(level,key){
       if(level == 1){
         this.label ="部门名称：";
         if(key=="add"){
           this.title = "添加部门";
           this.dialogOrg_add = true;
           this.addForm = {};
         }else{
            this.title = "修改公司";
            this.dialogOrg_edit = true;
         }
       }else if(level == 2){
          this.label ="区域名称：";
         if(key=="add"){
          this.title = "添加区域";
          this.dialogOrg_add = true
          this.addForm = {};
         }else{
          this.title = "添修改部门";
          this.dialogOrg_edit = true
         }
        
       }else if(level == 3){
         this.label ="机台名称：";
         if(key == "add"){
          this.title = "添加设备单元";
           this.addForm = {};
           this.dialogDevice_add = true;
           this.selectedNode.regionId = this.selectedNode.id;
           this.addForm.orgId = this.selectedNode.pid;
           this.addForm.regionId = this.selectedNode.id;
         }else{
          this.title= "修改区域";
          this.dialogOrg_edit = true;
         }
       }else if(level == 4){
          this.dialogDevice_edit = true;
          this.title= "修改设备";
          this.label ="机台名称：";
          if(key == "add"){
            this.addForm = {};
          }
       }
    },
    setData(data){
       this.editForm.name = data.label;
       this.editForm.id = data.id;
       if(this.selectedNode.level>3){
            this.getMachineById();
       }
    }, 
    getInitData(){
         //初始化设备类型
         requestPostDict(dict_parent_code_url, {code:"DEVICE"}).then(data => {
            this.options = data;
          }).catch(error => {
            this.$message({
              message: error,
              type: 'error'
            })
          });
         
        //初始化部门
         requestPostOrg(org_levle2_parent_id, {pid:this.selectedNode.regionId}).then(data => {
            this.departments = data;
            this.disOrg = true;
          }).catch(error => {
            this.$message({
              message: error,
              type: 'error'
            })
          });
        //初始化区域
        requestPostOrg(org_levle3_parent_id, {pid:this.selectedNode.regionId}).then(data => {
              this.regions = data;
              this.disReg = true;
          }).catch(error => {
            this.$message({
              message: error,
              type: 'error'
            })
          });
    },
    selectDevice(value){
      requestPostDict(dict_parent_pid_url, {pid:value}).then(data => {
            this.devices = data;
            this.editForm.deviceId = '';
             if(data.length>0){
                  this.editForm.deviceId = data[0].id;
                  this.disReg = true;
              }
          }).catch(error => {
            this.$message({
              message: error,
              type: 'error'
            })
          });
    },
    addDevice(){
      //添加设备
        requestPostMachine(machine_add_url, this.addForm).then(data => {
             this.$message({ message: data.msg,type:"success" });
             this.dialogDevice_add = false; 
             this.datas = this.getDepartmentData();
        }).catch(error => {
          this.$message({
            message: error,
            type: 'error'
          })
        });
    },
    updateDevice(){
      //修改设备
      requestPostMachine(machine_update_url, this.editForm).then(data => {
          this.$message({ message: data.msg,type:"success" });
          this.dialogDevice_edit = false; 
          this.datas = this.getDepartmentData();
      }).catch(error => {
        this.$message({
          message: error,
          type: 'error'
        })
      });
    },
    getMachineById(){
      requestPostMachine(machine_edit_url, {id:this.selectedNode.id}).then(data => {
             this.selectedNode = data; 
             this.editForm.deviceType = parseInt(this.selectedNode.deviceType);
             this.editForm.deviceId = this.selectedNode.deviceId;
             this.editForm.orgId = this.selectedNode.orgId;
             this.editForm.regionId = this.selectedNode.regionId;
             this.selectDevice(this.selectedNode.deviceType);
             this.getInitData();
        }).catch(error => {
          this.$message({
            message: error,
            type: 'error'
          })
        });
    
    }
  },
  mounted () {
    this.getDepartmentData()
  }
};
</script>

<style scoped>
@import "org-tree/index.css";
.title {
  font-size: 25px;
}
.import-export-button {
  float: right;
  margin-right: 40px;
}
.container {
  padding: 20px 20px;
  /* text-align: center; */
  /* margin-left: 100px;
  margin-top: 50px; */
  /* height: 500px; */
  /* background-color: aqua */
}
.changeLog {
  width: 100%;
  height: 35px;
}
.changeLog div {
  margin-top: 10px;
  position: relative;
  float: right;
  margin-right: 40px;
}
.changeLog label {
  font-size: 16px;
}
.graph {
  margin-top: 10px;
  width: 100%;
  /* height: 100%; */
  background-color: #fff;
  border: #c0c0c0 solid 1px;
  border-radius: 5px;
}
.percent-100 {
  width: 100%;
  height: 100%;
}
.department-outer {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.department-outer .tip-box {
  position: absolute;
  left: 20px;
  top: 20px;
  z-index: 12;
}
.department-outer .zoom-box {
  position: absolute;
  right: 30px;
  bottom: 30px;
  z-index: 2;
}
.department-outer .view-box {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1;
  cursor: move;
}
.department-outer .view-box .org-tree-drag-wrapper {
  width: 100%;
  height: 100%;
}
.department-outer .view-box .org-tree-wrapper {
  display: inline-block;
  position: absolute;
  left: 50%;
  top: 50%;
  transition: transform 0.2s ease-out;
}
.department-outer .view-box .org-tree-wrapper .org-tree-node-label {
  box-shadow: 0px 2px 12px 0px rgba(143, 154, 165, 0.4);
  border-radius: 4px;
}
.department-outer
  .view-box
  .org-tree-wrapper
  .org-tree-node-label
  .org-tree-node-label-inner {
  padding: 0;
}
.department-outer
  .view-box
  .org-tree-wrapper
  .org-tree-node-label
  .org-tree-node-label-inner
  .custom-org-node {
  padding: 14px 41px;
  user-select: none;
  word-wrap: none;
  white-space: nowrap;
  border-radius: 4px;
  color: #000000;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  cursor: default;
}
.department-outer
  .view-box
  .org-tree-wrapper
  .org-tree-node-label
  .org-tree-node-label-inner
  .custom-org-node.has-children-label {
  cursor: pointer;
}
.department-outer
  .view-box
  .org-tree-wrapper
  .org-tree-node-label
  .org-tree-node-label-inner
  .custom-org-node
  .context-menu {
  position: absolute;
  right: -10px;
  bottom: 20px;
  z-index: 10;
}
</style>
